<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="referrer" content="no-referrer">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 1300px;
            column-count: 4;
            column-gap: 10px;
            column-rule: 5px double blueviolet;
        }

        li {
            list-style: none;
            width: 300px;
            overflow: hidden;
            border: 2px solid;
            /* 整体输出，不分开 */
            break-inside: avoid;
            margin-bottom: 10px;
        }

        img {
            width: 300px;
        }

        i {
            /* display: inline-block;
            width: 100px;
            height: 100px; */
            /* background-image: url(https://c-ssl.duitang.com/uploads/people/201202/04/20120204164344_XhLaT.jpeg); */
        }
    </style>
</head>

<body>
    <div class="box">
        <!-- <li>
            <img src="" alt="" >
            <h5>不织布</h5>
            <p></p>
            <div>
                <i style="background-image: url();"></i>
                <span></span>
                </div>
        </li> -->

    </div>

    <script>
        /* 
            解决同源策略--------设置服务器代理

            在Nginx文件 conf=》vhost=》在需要打开的站点里面设置
            location /接口名 {
                proxy_pass 接口地址
            }
        
        */
        // https://www.duitang.com/napi/blog/list/by_filter_id/?include_fields=top_comments%2Cis_root%2Csource_link%2Citem%2Cbuyable%2Croot_id%2Cstatus%2Clike_count%2Csender%2Calbum%2Creply_count&filter_id=%E6%89%8B%E5%B7%A5DIY&start=0

        //  function fun(res){
        //     console.log(res);
        //  }
        var j = 0;

        var box = document.querySelector('.box');
        let str = '';
        let flag =true;


        window.onscroll = function () {
            var x =parseInt( document.body.offsetHeight * 0.8);
            // console.log(x);
            // console.log(scrollY);
            if (scrollY >= x && flag==true) {
                flag =false;
                j += 24;
                // console.log(i);
                Ajax(j);
                // Runder(data);
                // x+=600; 
            }
        }
        function Ajax(i) {
            
            let url =
                '/dt?include_fields=top_comments%2Cis_root%2Csource_link%2Citem%2Cbuyable%2Croot_id%2Cstatus%2Clike_count%2Csender%2Calbum%2Creply_count&filter_id=%E6%89%8B%E5%B7%A5DIY&start=' +
                i;
          
            let ajax = new XMLHttpRequest();
            ajax.open('get', url, true);
            ajax.send();
            ajax.onload = function () {
                let res = JSON.parse(ajax.responseText);
                let data = res.data.object_list;
                console.log(data);
                data.forEach(item => {
                    str += `
                    <li>
                        <img src="${item.photo.path}" alt="" >
                        <h5>${item.msg}</h5>
                        <p></p>
                        <div>
                        <i ></i>
                        <span>${item.favorite_count}</span>
                        </div>
                    </li>
                    `;
                });
                box.innerHTML = str;
                // Runder(res.data.object_list);
                flag=true;
            }
            
        }
        Ajax(0);
        
        // function Runder(data) {
        //     // console.log(data);

        //     if (data) {
        //         data.forEach(item => {
        //             str += `
        //             <li>
        //                 <img src="${item.photo.path}" alt="" >
        //                 <h5>${item.msg}</h5>
        //                 <p></p>
        //                 <div>
        //                 <i ></i>
        //                 <span>${item.favorite_count}</span>
        //                 </div>
        //             </li>
        //             `;
        //         });
        //         box.innerHTML += str;
        //     }
           
        // }
        
        
    </script>
</body>

</html>